export default function updateNodeElement(
  newElement,
  virtualDOM,
  oldVirtualDOM = {}
) {
  // 获取节点对应的属性对象
  const newProps = virtualDOM.props || {};
  const oldProps = oldVirtualDOM.props || {};

  if (virtualDOM.type === 'text') {
    if (newProps.textContent !== oldProps.textContent) {
      if (virtualDOM.parent.type !== oldVirtualDOM.parent.type) {
        virtualDOM.parent.stateNode.appendChild(
          document.createTextNode(newProps.textContent)
        );
      } else {
        virtualDOM.parent.stateNode.replaceChild(
          document.createTextNode(newProps.textContent),
          oldVirtualDOM.stateNode
        );
      }
    }
    return;
  }

  Object.keys(newProps).forEach((propName) => {
    const newPropValue = newProps[propName];
    const oldPropValue = oldProps[propName];

    if (newPropValue !== oldPropValue) {
      // 判断属性是否是事件属性 onClick -> click
      if (propName.startsWith('on')) {
        // 事件名称
        const eventName = propName.toLowerCase().slice(2);
        // 为元素添加事件
        newElement.addEventListener(eventName, newPropValue);
        // 删除原有的事件处理函数
        if (oldPropValue) {
          newElement.removeEventListener(eventName, oldPropValue);
        }
      } else if (propName === 'value' || propName === 'checked') {
        newElement[propName] = newPropValue;
      } else if (propName !== 'children') {
        if (propName === 'className') {
          newElement.setAttribute('class', newPropValue);
        } else {
          newElement.setAttribute(propName, newPropValue);
        }
      }
    }

    // 判断属性被删除的情况
    Object.keys(oldProps).forEach((propName) => {
      const newPropValue = newProps[propName];
      const oldPropValue = oldProps[propName];
      if (!newPropValue) {
        // 属性被删除了
        if (propName.startsWith('on')) {
          const eventName = propName.toLowerCase().slice(2);
          newElement.removeEventListener(eventName, oldPropValue);
        } else if (propName !== 'children') {
          newElement.removeAttribute(propName);
        }
      }
    });
  });
}
